<!-- 角色=> 企业  -- 征信报告 -->
<template>
  <div class="main">
    <PureTableBar class="list_hei" title="催收系统">
      <template #buttons>
        <el-button type="primary" @click="CreditVisible = true"> 新建催收任务 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="600"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <template #detail="{ row }">
            <el-popconfirm title="是否确认应用?" @confirm="handleApply(row)" v-if="row.isApplication == 0">
              <template #reference>
                <el-button class="reset-margin" text type="primary" size="small">
                  点击应用
                </el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" size="small" text v-else disabled> 应用成功 </el-button>
          </template>
          <template #operation="{ row }">
            <el-button type="primary" size="small" text @click="ShowReportDestail(row)" v-if="row.isApplication == 1"> 查看
            </el-button>
            <el-button type="primary" size="small" text v-else disabled> 查看
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <!-- 新建 -->
  <ReDialog :width="550" :height="200" :models="CreditVisible" @Closes="CloseVisible()">
    <template #header>
      <h2 style="text-align: center;">新建催收任务</h2>
    </template>
    <template #main>
      <el-form :model="formData" label-width="150px">
        <el-form-item label="催收任务名称">
          <el-input placeholder="催收任务名称" v-model.trim="formData.taskName" class="!w-[300px]" />
        </el-form-item>
        <el-form-item label="催收策略模型">
          <el-select v-model="formData.collectionStrategyModelId" class="!w-[300px]">
            <el-option v-for="type in collectionStrategyModels" :key="type.collectionStrategyModelId" :label="type.policyName
            " :value="type.collectionStrategyModelId" />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="SubmitVisible()" :loading="BtnLoading" type="primary">确定</el-button>
        <el-button @click="CloseVisible()"> 取消 </el-button>
      </span>
    </template>
  </ReDialog>
  <!-- 查看详情 -->
  <ReDialog :width="1000" :height="600" :models="DetailVisible" @Closes="CloseDetailVisible()">
    <template #header>
      <h2 style="text-align: center;">查看催收效果</h2>
    </template>
    <template #main>
      <el-scrollbar height="500px">
        <el-form label-width="150px">
          <PureTableBar class="list_hei">
            <template v-slot="{ size, checkList }">
              <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
                size="small" :data="dataList1" :columns="columns1" :pagination="pagination1" max-height="520"
                :header-cell-style="{
                  background: 'var(--el-table-row-hover-bg-color)',
                  color: 'var(--el-text-color-primary)'
                }" @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
              </pure-table>
            </template>
          </PureTableBar>
          <el-form-item label="客户还款率">
            {{ formData1.repaymentRate }}
          </el-form-item>
          <el-form-item label="催收策略执行情况">
            {{ formData1.collectionEfficiency }}
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </template>
  </ReDialog>
</template>
<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useRiskStrategic } from "./hook/collectionStrategy";
import { ref, reactive, nextTick, watch } from "vue";
const {
  dataList,
  loading,
  CreditVisible,
  pagination,
  columns,
  formData,
  handleCurrentChange,
  handleSizeChange,
  SubmitVisible,
  CloseVisible,
  customerTypeList,
  collectionStrategyModels,
  handleApply,
  DetailVisible,
  CloseDetailVisible,
  ShowReportDestail,
  BtnLoading,
  dataList1,
  pagination1,
  columns1,
  formData1,
  handleCurrentChange1,
  handleSizeChange1,
} = useRiskStrategic()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);
</style>
